.zhitianBox{
	width: 100%;
	height: 100%;
	background: #002F5E;
	overflow: auto;
	.mainTitle{
		font-size: 36px;
		color: #FFFFFF;
		letter-spacing: 0.68px;
		line-height: 36px;
		text-shadow: 0 0 50px #0B63C9;
		text-align: center;
		padding: 28px 0 40px;
	}
	.content{
		display: flex;
		width: 2948px;
		height: 418px;
		.line{
			margin: 0 20px;
			width: 2px;
			height: 384px;
			background: linear-gradient(to bottom, rgba(51,153,1255, 0) 0%, #3C96FF 50%, rgba(51,153,1255, 0) 100%);
		}
	}
	// 一带一路
	.mapImgBox{
		//width: (1936 / 2)px;
		width: 898px;
		height: 405px;
		background: url("./img/一路一带.png") no-repeat center center;
		background-size: contain;
		margin-right: 30px;
		// 轮播图设置
		.content{
			position: relative;
			display: flex;
			margin-top: 5px;
			width: 100%;
			height: 100%;
			.titleTop{
				position: absolute;
				left: 263px;
				top: 17px;
				transform: rotate(-7deg);
				font-size: 24px;
				color: #FFFFFF;
				letter-spacing: 0.46px;
				line-height: 24px;
			}
			.titleBot{
				left: 240px;
				top: 303px;
				position: absolute;
				transform: rotate(-6deg);
				font-size: 24px;
				color: #FFFFFF;
				letter-spacing: 0.46px;
				line-height: 24px;
			}
			.svgBox{
				position: absolute;
				width: 100%;
				height: 100%;
				svg{
					width: 70%;
					height: 100%;
					border-radius: 40px;
				}
			}
			.hiddenBox{
				position: absolute;
				left: 10px;
				top: 10px;
				border:1px solid red;
			}
			.cityDetails{
				position: absolute;
				right: 0;
				top: 65px;
				width: 266px;
				padding: 0 10px;
				>div:first-child{
					display: flex;
					height: 54px;
					margin-bottom: 33px;
					justify-content: space-between;
					>span{
						font-size: 20px;
						color: #FFFFFF;
						letter-spacing: 0.38px;
						line-height: 54px;
						width: 50%;
						text-align: center;
					}
					>div{
						width: 50%;
						padding-right: 15px;
						>div{
							text-align: right;
							margin-bottom: 15px;
							img{
								height: 26px;
							}
							span{
								font-size: 18px;
								color: #B8CEEF;
								letter-spacing: 0.59px;
								line-height: 18px;
							}
						}
						p{
							text-align: right;
							font-size: 18px;
							color: #B8CEEF;
							letter-spacing: 0.59px;
							line-height: 18px;
						}
					}
				}
				>div:last-child{
					width: 100%;
					height: 164px;
				}
			}
			ul.positions{

				li{
					position: absolute;
					left: 0;
					top: 0;
					width: 104px;
					padding-top: 12px;
					text-align: center;
					font-size: 12px;
					color: #DAE4F2;
					letter-spacing: 0.5px;
					margin-left: -52px;
				}
			}

		}
	}

	.liveIndexBox{
		padding-left: 36px;
		padding-right: 5px;

		>div{
			position: relative;
			overflow: hidden;
			width: 432px;
			height: 384px;
			.carouselBox{
				margin: 0;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;

				// 生活指数
				.outerBox{
					width: 432px;
					height: 384px;

					.title{
						font-size: 28px;
						color: #FFFFFF;
						letter-spacing: 0.53px;
						line-height: 28px;
						text-shadow: 0 0 20px #0B63C9;
					}
					.content{
						width: 100%;
						height: 354px;
						display: flex;
						justify-content: center;
						align-items: center;

						.innerBox{
							width: 100%;
							display: flex;
							justify-content: space-around;
							>div{
								display: flex;
								align-items: center;
								justify-content: center;
							}
							p{
								width: 166px;
								font-size: 20px;
								color: #FFFFFF;
								letter-spacing: 0.24px;
								line-height: 24px;
								text-align: center;
								padding-top: 22px;
							}
						}


					}
				}
			}
		}

	}


	.serviceBox{
		width: 830px;
		padding-left: 30px;
		padding-right: 30px;
		position: relative;
		.content{
			display: flex;
			height: 400px;
			width: 1000px;
			margin-left: -135px;
			background: url("./img/serviceBg.png") no-repeat left center;
			background-size: contain;

			.title{
				position: absolute;
				left: 479px;
				top: 54px;
				font-size: 20px;
				color: #FFFFFF;
				letter-spacing: 0.87px;
				line-height: 20px;
				text-shadow: 0 0 2px #0192FF;
				text-align: center;
				width: 272px;
			}

			.titleBox{

				position: absolute;
				left: 36px;
				top: 67px;
				width: 180px;
				height: 180px;
				li{
					position: absolute;
					left: 0;
					top: 0;
					width: 80px;
					height: 80px;

					font-size: 16px;
					color: #FFF;
					line-height: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					&:nth-child(1){
						left: 0;
						top: 0;
					}
					&:nth-child(2){
						left: 85px;
						top: 50px;
					}
					&:nth-child(3){
						left: 0;
						top: 93px;
					}
					&:nth-child(4){
						left: 85px;
						top: 142px;
					}
					&:nth-child(5){
						left: 0;
						top: 186px;
					}
					span{
						width: 60px;
						word-break: break-word;
						text-align: center;
					}
				}
			}
			.carouselRight_box{
				width: 211px;
				height: 349px;
				position: absolute;
				left: 152px;
				top: 24px;
				:global{
					.carousel {
						position: relative;
						height: 360px;
						width: 100%;
						transform-style: preserve-3d;
						perspective: 800px;
						.item {
							position: absolute;
							top: 50%;
							width: 142px;
							height: 40px;
							text-align: center;
							transition: transform .5s ease-in-out;
							.name{
								width: 142px;
								height: 40px;
								display: inline-block;
								font-size: 20px;
								color: #CEE4FF;
								letter-spacing: 0.38px;
								line-height: 40px;
								margin-right: 56px;
								margin-left: 8px;
								background: url("./img/nameBg.png") no-repeat;
								background-size: 100% 100%;
							}
							&.on{
								.name{
									margin-right: 48px;
								}
							}

						}

					}
				}
			}
			.listBox{
				width: 272px;
				height: 330px;
				position: absolute;
				left: 479px;
				top: 36px;
				padding-top: 82px;
				:global{
					.listOuter{
						position: relative;
						width: 100%;
						overflow: hidden;
						.listInner{
							width: 800px;
							ul.item{
								width: 272px;
								padding-left: 50px;
								float: left;
								li{
									margin-bottom: 20px;
									line-height: 20px;
									display: flex;

								}
								li >i{
									display: inline-block;
									width: 12px;
									height: 12px;
									background-color: #ff644c;
									border-radius: 50%;
									margin-right: 15px;
									margin-top: 4px;
								}
								li span{
									text-align: left;
									width: 150px;
									word-break: break-word;
									font-size: 16px;
									color: #FAFCFF;
									line-height: 20px;
								}

							}

						}
						ul.bannerNav{
							height: 18px;
							overflow: hidden;
							width: 270px;
							display: flex;
							justify-content: center;

						}
						ul.bannerNav li{
							width: 10px;
							height: 10px;
							border: 1px solid #0192ff;
							border-radius: 50%;
							background-color: #020a0f;
							margin-right: 17px;
							cursor: pointer;
						}
						ul.bannerNav li.active{
							background-color: #0192ff;
						}

					}
				}
			}

		}

	}
}
